<template>
	<view class="out-box">
		<view class="main">
			<view class="content">
				<uni-forms ref="baseForm" :border="true" :model="baseFormData" 
					labelWidth="180rpx"
					:rules="rules"
				>
					<uni-forms-item label="填写联系人" required name="name">
						<uni-easyinput clearSize="40rpx" :styles="styleone" :inputBorder="false"  :placeholderStyle="placeholderStyle" 
						v-model="baseFormData.name" placeholder="请填写联系人名称" />
					</uni-forms-item>
					<uni-forms-item label="您的联系电话" required name="phone">
						<uni-easyinput type="number" clearSize="40rpx" :styles="styleone" :placeholderStyle="placeholderStyle" 
						:inputBorder="false" v-model="baseFormData.phone" placeholder="请填写联系电话，为您推荐更多适合信息" />
					</uni-forms-item>
					<uni-forms-item label="您想要找店的区域是？">
						<view class="Address">
							<view class="address_i"></view>
							<view class="Address-item">
								<picker mode="multiSelector" :value="multiIndex" 
								:range="newAddressList" range-key="label"
									@change="pickerChange" @cancel="pickerCancel"
									 @columnchange="pickerColumnchange">
										<view class="uni-input">{{addressList.join('-')}}</view>
								</picker>
							</view>
							<view class="address_ii"></view>
						</view>
					</uni-forms-item>
					<!-- <view class="hrone"></view> -->
					<uni-forms-item label="您想要找房源类型？">
						<view class="use_to">
							<view v-for="item,index in alltype_value.bigrequired" :key="index" @tap="chedbig(item)">
								<view :class="alltype_value.bigdefault.id == item.id ?'active': 'use_item'">
									{{ item.name }}
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="您想要适合什么用途或性质的？">	
						<view class="use_too">	
							<view v-for="item,index in alltype_value.default.childList" :key="index" @tap="samllChange(item)">
								<view :class="baseFormData.shop_type == item.name ?'active': 'use_item'">
									{{ item.name }}
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="您是否急租？">
						<view class="use_to">
							<view v-for="item,index in rapid_turn" :key="index" @tap="radioChange(item)">
								<view :class="baseFormData.Rapid == item.value ?'active': 'use_item'">
									{{ item.name }}
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="您的租金预算是多少（元/月）？">
						<view class="use_too">
							<view v-for="item,index in cz_rent" :key="index" @tap="xz_rent(item)">
								<view :class="cz_aefault_va.default.name == item.name ?'active': 'use_item'">
									{{ item.name }}
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="您想找多大面积的？">
						<view class="use_too">
							<view v-for="item,index in cz_area" :key="index" @tap="xz_area(item)">
								<view :class="cz_aefault_va.arma_default.name == item.name ?'active': 'use_item'">
									{{ item.name }}
								</view>
							</view>
						</view>
					</uni-forms-item>

					<view class="hrone"></view>
					<view class="my_chebox" >对店铺有什么配套设施需求？</view>
							<uni-data-checkbox multiple 
								v-model="checkbox2"
								@change="checkboxarr(e)"
								mode="tag"
								:localdata="hobby">
							</uni-data-checkbox>
					<view class="my_chebox">求租标题<span class="span1"> (请填写标题，可以让更多人查看增加曝光哟)</span></view>
					<view class="feint_title">
						<!-- <input class="title_sty" type="text" :placeholderStyle="placeholderStyle"
						placeholder="请填写标题，可以让更多人查看增加曝光哟" v-on:focus="onfocus" v-model="baseFormData.title"> -->
						<textarea :inputBorder="false" class="textareaone" v-model="baseFormData.title" v-on:focus="onfocus"
							placeholder="例如：上海嘉定区70㎡商业街商铺做餐饮急需转让，有意者请联系我" :placeholderStyle="placeholderStyle">
						</textarea>
					</view>
					<!-- <view class="my_chebox">求租标题<span class="span1"> (点击输入框可更改标题)</span></view>
					<view class="feint_title">
						<input class="title_sty" type="text" v-model="baseFormData.title">
					</view> -->
				</uni-forms>
			</view>
		</view>
		
		<!-- 最下方悬浮支付 -->
		<view class="buttom">
			<!-- <view class="buttom_top">
				<view class="buttom_lef"><uni-data-checkbox @change="click_confirm()" multiple v-model="range_value" :localdata="range"></uni-data-checkbox></view>
				<view class="buttom_top_text"><text>勾选即表示阅读并同意</text><span class="span1"><text>《服务协议》</text></span></view>
			</view> -->
			<view class="buttom_buttom" @tap="to_release()">确认发布</view>
		</view>

		<!-- 普通弹窗 -->
		<!-- <uni-popup ref="popup_ipone" :is-mask-click="false" v-if="product_value.default && product_lists" :safe-area="false">
			<view class="popupipone_center">
				<view class="porop_tit">
					<view class="porop_tit_left">求租信息发布，快速找到理想店铺</view>
					<view class="porop_tit_right" @tap="colse_popup_ipone()"></view>
				</view> 	
		
				<view class="three_select">  
					<view :class="user.top_grade == 1? 'select_active':'select_item'" @tap="onselect(1)">
						<image class="img" v-if="user.top_grade == 1"  src="../../static/images/会员.png"></image>
						<view class="text">县级置顶</view>
					</view>
					<view :class="user.top_grade == 2? 'select_active':'select_item'" @tap="onselect(2)">
						<image class="img" v-if="user.top_grade == 2"  src="../../static/images/会员.png"></image>
						<view class="text">市级置顶</view>
					</view>
					<view :class="user.top_grade == 3? 'select_active':'select_item'" @tap="onselect(3)">
						<image class="img" v-if="user.top_grade == 3" src="../../static/images/会员.png"></image>
						<view class="text">官方认证</view>
					</view>
				</view>
				<view class="prop_center" v-if=" product_value.required &&product_value.required[0]">
					<view class="prop_center_top">
						<view class="center_top">
							<view class="center_left">{{product_tit.title}}</view>
							<view class="center_right">{{product_value.required[0].now_money/100}}<span class="spanone">元</span></view>
						</view>
						<view class="center_butt">
							<view class="butt_left">{{ product_tit.titletwp }}</view>
							<view class="butt_right"><uni-icons type="checkbox-filled" color="rgba(255, 87, 51, 1)" size="30"></uni-icons> </view>
						</view>
					</view>
					
					<view class="prop_center_bot" v-if="user.top_grade != 3">
						<view class="center_top">
							<view class="center_left">{{'店铺置顶'}}</view>
						</view>
						<view class="select_center">
							<view v-for="item,index in product_value.requiredtwo" :key="index">
								<view :class="item.id == product_value.default.id ? 'select_center_item active' : 'select_center_item' " @tap="childList(item)"> 
									<view class="item_top">{{ item.product_name }}</view>
									<view class="item_center"><span class="span2">￥</span>{{ item.now_money/100}}</view>
									<view class="item_three" v-show="item.old_money">{{ '￥' +  item.old_money/100 }}</view>
									<view class="item_four">{{ item.product_desc }}</view>
									<image class="jiaobiao" src="../../static/images/jiaobiao.png" v-if="item.id == product_value.default.id"></image>
								</view>
							</view>
						</view>
					</view>
			
					<view class="propu_title">
						注：预估转让成功率仅为大数据分析结果
					</view>
				</view>
				<view class="prop_bottom">
					<view class="buttom_top">实际支付金额￥{{product_value.allmoney/100}}</view>
					<view class="buttom_btn" @tap="pay_throttle()">立即推广展示</view>
				</view>
			</view>
		</uni-popup> -->

			<!-- 求租支付弹框 -->
	<uni-popup ref="paypopup" :is-mask-click="false">
		<view class="popuppay">
			<view class="popuppay_imgtwo" @tap="colse_paypopup()"></view>
			<view class="main_one">
				<view class="black"></view>
				<view class="black_tit">会员套餐</view>
			</view>
			<view class="check">
				<view v-for="(item,index) in product_value.required" :key="index">
					<view :class="product_value.default.id == item.id? 'item active' : 'item '" @tap="cpdefault(item)">
						<view class="tit">{{ item.product_name }}</view>
						<view class="money">{{ '￥' + item.now_money/100 }}</view>
						<view class="jiaobiao" v-if="product_value.default.id == item.id" ></view>
					</view>
				</view>
			</view>
			<view class="main_one">
				<view class="black_tit">会员专属权益</view>
			</view>
			<view class="quanyi">
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/z1.png"></image>
						</view>
						<view class="bigtit">转店查看</view>
						<view class="tit">{{ product_value.dier.id == product_value.default.id?'无限次数':'每天30次' }}</view>
					</view>
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q2.png"></image>
						</view>
						<view class="bigtit">出租查看</view>
						<view class="tit">{{ product_value.dier.id == product_value.default.id?'无限次数':'每天30次' }}</view>
					</view>
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q3.png"></image>
						</view>
						<view class="bigtit">电话查看</view>
						<view class="tit">{{ product_value.dier.id == product_value.default.id?'无限次数':'每天30次' }}</view>
					</view>
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q5.png"></image>
						</view>
						<view class="bigtit">微信添加</view>
						<view class="tit">{{ product_value.dier.id == product_value.default.id?'无限次数':'每天30次' }}</view>
					</view>
					<view class="item" v-if="product_value.dier.id == product_value.default.id">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q52.png"></image>
						</view>
						<view class="bigtit">专属客服</view>
						<view class="tit">24小时在线咨询</view>
					</view>
					<view class="item" v-if="product_value.dier.id == product_value.default.id">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q6.png"></image>
						</view>
						<view class="bigtit">精准匹配</view>
						<view class="tit">系统精准推荐</view>
					</view>
					<view class="item" v-if="product_value.dier.id == product_value.default.id">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q7.png"></image>
						</view>
						<view class="bigtit">发布置顶</view>
						<view class="tit">全平台15天置顶</view>
					</view>
			</view>
			<view class="bottom">
				<view class="bottom_one"> {{'实际支付金额￥' + product_value.allmoney/100 }}</view>
				<view class="bottom_two" @tap="pay_throttle">立即发布推广</view>
			</view>
		</view>
	</uni-popup>
	</view>
</template>

<script setup>
import {ref,reactive,onBeforeMount,onMounted,watchEffect} from 'vue'
import areaData from '../../util/js/area-data1'
import {onGotApiData,addClick} from '../../util/api.js'

// 在组件渲染之前执行
onBeforeMount(() => {
	console.log('组件准备渲染',);
	// popup_ipone.value.open('bottom')
	baseFormData.channel_no = uni.getStorageSync('channel_no');
	user.openid = uni.getStorageSync('open_id');
	user.user_id = uni.getStorageSync('user_id');

	// 判断一下有没有取到值
	const provinceone = uni.getStorageSync('province') || '';
	const cityone = uni.getStorageSync('city')|| '';
	const districtone = uni.getStorageSync('district')|| '';
	if(provinceone!= []&&provinceone!= ''&&cityone!= []&&cityone!= ''&&districtone!= []&&districtone!= ''){
		// 赋值到列表展示
		addressList[0] = provinceone
		addressList[1] = cityone
		addressList[2] = districtone
		// 赋值到表单提交
		baseFormData.province = provinceone
		baseFormData.city = cityone
		baseFormData.county = districtone
		console.log('地区',provinceone,cityone,districtone)
		console.time('forLoop');
		if(districtone == '不限'){
			// console.log('全部地址',areaData)
			areaData.forEach(item =>{
				if(provinceone == item.label){
					item.children.forEach(item1 =>{
						if(item1.label == cityone){
							console.log('111',item1.children)
							addressList[2] = item1.children[0].label
							baseFormData.county = item1.children[0].label
						}
					})
				}
			})
		}
		console.timeEnd('forLoop');
	}
		// 请求店铺类型的接口
		shop_alltype()
		// 初始化地区的数组
		initAddress();
	
})
// 在组件渲染完成后执行
onMounted(() => {
	console.log('组件已经渲染完毕');
})

let popup_ipone = ref(null)
// 关闭遮罩层
const colse_popup_ipone = ()=>{
	product_value.default = {}
	popup_ipone.value.close()
}
let styleone = reactive({borderColor: '#FFF',fontSize:'98rpx'})
let styletwo = reactive({background:'#FFF'})

	// 用户的信息
let user = reactive({
	openid:'',
	user_id:'',
	shop_type:0,
	shop_id:'',
	product_id:'',
	money:0,
	paymoney:0,
	top_grade:1,
})
// 表单部分内容
let baseFormData = reactive({
			channel_no:'XCX_PPZ_V1',
			title:'',
			name: '',
			title:'',
			phone:'',
			area:'',
			rent:'',
			transference:'',
			introduce:'',
			// 封面图片
			cover_img:'',
			province:'北京市',
			city:'北京市',
			county:"东城区",
			checkbox3:'',
			shop_type:'不限',
			Rapid:0,
			imgs:[],
			// 详细地址
			detail_address:'',
			// 这个值是给标题使用的
			Rapidname:'商铺',
			// 选中的大类型
			shop_first_type:1,
		})

		let blur_value = ref(0)
	watchEffect(() => {
		// if(baseFormData.title ==''&& baseFormData.area){
		// 	baseFormData.title = '找' + baseFormData.county + baseFormData.area+'㎡'+'左右'+ baseFormData.Rapidname +'做'+ (baseFormData.shop_type=='不限'?'':baseFormData.shop_type)
		// }
		// if(baseFormData.title ==''&&blur_value.value !=1){
		// 	if(baseFormData.area){
		// 		baseFormData.title = '找' + baseFormData.county + baseFormData.area+'㎡'+'左右'+ baseFormData.Rapidname +'做'+ (baseFormData.shop_type=='不限'?'':baseFormData.shop_type)
		// 	}
		// }else if(blur_value.value != 1){
		// 	baseFormData.title = '找' + baseFormData.county + baseFormData.area+'㎡'+'左右'+ baseFormData.Rapidname +'做'+ (baseFormData.shop_type=='不限'?'':baseFormData.shop_type)
		// }

		if(baseFormData.phone){
			baseFormData.title = '找' + baseFormData.county + (cz_aefault_va.arma_default.name == '不限'?'':cz_aefault_va.arma_default.name) +  alltype_value.bigdefault.name  +  '做' + baseFormData.shop_type + '，有店可与我联系哟'
		}
	});	
	// 提示文字的样式
	const placeholderStyle = ref("font-size:28rpx;color:rgba(128, 128, 128, 1);fontWeight:400;")
	// 输入框获取到焦点事件
	const onfocus = () =>{
		console.log('我获取到了焦点')
		blur_value.value = 1
		// baseFormData.title = title.value
	}
// 表单校验规则
let ruless = ref(1)

let rules = reactive({
				name: {
					rules: [{
						required: true,
						errorMessage: '姓名不能为空'
					}]
				},
				phone: {
					rules: [{
						required: true,
						errorMessage: '手机号不能为空'
					},
					{
						minLength: 10,
						maxLength: 11,
						errorMessage: '请填写正确手机号',
					},
					{
						pattern: '^[1][3,4,5,6,7,8,9][0-9]{9}$',
						errorMessage: '请填写正确手机号',
					}]
				},
				city: {
					rules: [{
						required: true,
						errorMessage: '请重新点击选择所属区域'
					},
					{
						pattern: '^[1][3,4,5,6,7,8,9][0-9]{9}$',
						errorMessage: '请填写正确手机号',
					}]
				},
				// title: {
				// 	rules: [{
				// 		required: true,
				// 		errorMessage: '标题不能为空'
				// 	}]
				// },
				area: {
					rules: [{
						required: true,
						errorMessage: '面积不能为空'
					}]
				}

			})	

// 店铺地址全部变量以及方法
const oldAddressList = reactive(areaData)
const newAddressList = reactive([
	[],
	[],
	[]
])
// 最后显示的值
const addressList = reactive(['北京市', '北京市', '东城区'])
const tempAddressList = reactive([])
// 列表中的值
const multiIndex = reactive([])

	// 取消时候触发的
const initMultiIndex = () => {
	if (!addressList) {
		multiIndex[0] = 0;
		multiIndex[1] = 0;
		multiIndex[2] = 0;
		return;
	}
	const province = addressList[0];
	const city = addressList[1];
	const area = addressList[2];

	const provinceObj = oldAddressList.find(item => item.label === province);
	const provinceIndex = oldAddressList.findIndex(item => item.label === province);

	console.log(provinceObj)
	const cityObj = provinceObj.children.find(item => item.label === city);
	const cityIndex = provinceObj.children.findIndex(item => item.label === city);

	const areaObj = cityObj.children.find(item => item.label === area);
	const areaIndex = cityObj.children.findIndex(item => item.label === area);

	multiIndex[0] = provinceIndex
	multiIndex[1] = cityIndex
	multiIndex[2] = areaIndex
	console.log(multiIndex)
}

	// 把js中的数据遍历到这个数组上去
const initAddress = () => {
	initMultiIndex();

	newAddressList[0] = oldAddressList.map((item, index) => {
		var obj = {
			label: item.label,
			value: item.value
		}
		return obj
	})
	newAddressList[1] = oldAddressList[multiIndex[0]].children.map((item, index) => {
		var obj = {
			label: item.label,
			value: item.value
		}
		return obj
	})
	newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]].children.map(
		(item, index) => {
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})

	console.log('newAddressList:', newAddressList);

}

// value值改变时候触发
const pickerChange = (e) => {
	console.log('pickerChange:', e.detail.value);
	const [provinceIndex, cityIndex, areaIndex] = e.detail.value;
	const province = newAddressList[0][provinceIndex].label;
	const city = newAddressList[1][cityIndex].label;
	const area = newAddressList[2][areaIndex].label;
	console.log(province + '-' + city + '-' + area);
	baseFormData.province = province
	baseFormData.city = city
	baseFormData.county = area
	addressList[0] = province
	addressList[1] = city
	addressList[2] = area
}

// 某一列值改变时候触发
const pickerColumnchange = (e) => {
	console.log('pickerColumnchange:', e);
	// 第几列滑动
	// console.log(e.detail.column);
	// 第几列滑动的下标
	// console.log(e.detail.value)
	// 第一列滑动
	if (e.detail.column === 0) {
		multiIndex[0] = e.detail.value;

		newAddressList[1] = oldAddressList[multiIndex[0]].children.map((item,
			index) => {
			// console.log('item:',item);
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})
		multiIndex[1] = 0
		multiIndex[2] = 0;
		newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]]
			.children
			.map((item, index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})

	}
	if (e.detail.column === 1) {
		multiIndex[1] = e.detail.value
		multiIndex[2] = 0;
		newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]]
			.children
			.map((item, index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})
	}
	if (e.detail.column === 2) {
		multiIndex[2] = e.detail.value
	}
}
// 取消时候触发
const pickerCancel = () => {
	// initMultiIndex();
	console.log('我取消了城市选择器')
}
// 请求到店铺类型的数据
let alltype_value  = reactive({
	// 全部数据
	required:[],
	bigrequired:[],
	// 选中的数据
	bigdefault:{},
	default:{},
})

// 请求店铺全部类型
const shop_alltype = () =>{
	let params = reactive({})
	// params.channelNo = user.channel_no,
	params.type = 2,	//代表求租
	params.grade = 1,
	console.log("params",params)
	onGotApiData('/api/app/other/type_list','GET',params,result_alltype)
}
// 请求店铺全部类型的结果
const result_alltype = (result) => {
	// 遍历一下，会有json字符串
	result.forEach((value,index,Array)=>{
		if(value.childList){
			Array[index].childList = JSON.parse(value.childList)
			Array[index].childList.splice(0, 1);
		}
	})
	console.log('店铺全部类型的请求结果',result)
		// 全部类型
		alltype_value.required = result
		// 大类型遍历出来
		result.forEach((item,index)=>{
			const obj = {
				name:item.name,
				id:item.id
			}
			alltype_value.bigrequired.push(obj)
		})
		console.log('店铺全部大类型',alltype_value.bigrequired)
		// 选中第一个大类
		alltype_value.bigdefault = alltype_value.bigrequired[0]
		// 小类型遍历出来
		result.forEach((item,index)=>{
			// console.log("baseFormData.shop_first_type",baseFormData.shop_first_type)
			if(alltype_value.bigdefault.id == item.id){
				alltype_value.default = item
			}
		})
		baseFormData.shop_type = alltype_value.default.childList[0].name
		// 选中的大的店铺类型
		console.log('选中的大类型',alltype_value.default)
		console.log('选中的小类型',baseFormData.shop_type)
	}

	// 店铺的大类型选择
	const chedbig = (item)=>{
		console.log('item',item.name)
		if(item.id != alltype_value.bigdefault.id){
			alltype_value.bigdefault = item
		// 小类型遍历出来
		alltype_value.required.forEach((item,index)=>{
			// console.log("baseFormData.shop_first_type",baseFormData.shop_first_type)
			if(alltype_value.bigdefault.id == item.id){
				alltype_value.default = item
			}
		})
		baseFormData.shop_type = alltype_value.default.childList[0].name
		}
	}
	// 店铺小类型选择
	const samllChange = (e) =>{ 
		console.log("e",e)
		baseFormData.shop_type = e.name
	}

	// 单选框的内容
	// 这个是显示的，不是值
	let rapid_turn = ref([
				{
                    value: '1',
                    name: '是'
                },{
                    value: '0',
                    name: '否'
                },
            ],)
	const radioChange = (evt)=> {
		baseFormData.Rapid = evt.value
		console.log('我是单选框',evt)
	}
	// 出租的租金预算是多少
	let cz_aefault_va = reactive({
			default:{
				mix:'0',
				max:'0',
				name: '不限'
			},
			arma_default:{
						mix:'0',
						max:'0',
						name: '不限'
					}
		})
	let cz_rent = ref([
					{
						mix:'0',
						max:'0',
						name: '不限'
					},{
						mix:'0',
						max:'1500',
						name: '1500以下'
					},
					{
						mix:'1500',
						max:'3000',
						name: '1500-3000'
					},
					{
						mix:'3000',
						max:'6000',
						name: '3000-6000'
					},
					{
						mix:'6000',
						max:'10000',
						name: '6千-1万'
					},
					{
						mix:'10000',
						max:'30000',
						name: '1万-3万'
					},
					{
						mix:'30000',
						max:'',
						name: '3万元以上'
					}
				],)
	const xz_rent = (evt)=> {
		cz_aefault_va.default = evt
		console.log('我是单选框',evt)
	}
	// 出租的面积选择
	let cz_area = ref([
					{
						mix:'0',
						max:'0',
						name: '不限'
					},{
						mix:'0',
						max:'50',
						name: '50㎡以下'
					},
					{
						mix:'50',
						max:'100',
						name: '50-100㎡'
					},
					{
						mix:'100',
						max:'200',
						name: '100-200㎡'
					},
					{
						mix:'200',
						max:'500',
						name: '200-500㎡'
					},
					{
						mix:'500',
						max:'1000',
						name: '500-1000㎡'
					},
					{
						mix:'1000',
						max:'',
						name: '1000㎡以上'
					},
				],)
	const xz_area = (evt)=> {
		cz_aefault_va.arma_default = evt
			console.log('我是单选框',evt)
		}
	
// 多选框	
let checkbox2 = ref([])
let hobby = reactive([{
					text: '临近地铁',
					value: '临近地铁'
				}, {
					text: '居民密集',
					value: '居民密集'
				},
				{
					text: '天然气',
					value: '天然气'
				},
				{
					text: '中央空调',
					value: '中央空调'
				},
				
				{
					text: '停车位',
					value: '停车位'
				},
				{
					text: '电话/网络',
					value: '电话/网络'
				},
				{
					text: '暖气',
					value: '暖气'
				},
				{
					text: '上水',
					value: '上水'
				},
				{
					text: '客梯',
					value: '客梯'
				},
				{
					text: '货梯',
					value: '货梯'
				},
				{
					text: '排烟',
					value: '排烟'
				},
				{
					text: '排污',
					value: '排污'
				},
				{
					text: '可明火',
					value: '可明火'
				},
				{
					text: '380V',
					value: '380V'
				},
				{
					text: '外摆区',
					value: '外摆区'
				},
				{
					text: '黄金地段',
					value: '黄金地段'
				},
				{
					text: '扶梯',
					value: '扶梯'
				},
				{
					text: '下水',
					value: '下水'
				},
				{
					text: '管煤',
					value: '管煤'
				},
				{
					text: '临街门面',
					value: '临街门面'
				},
				{
					text: '可餐饮',
					value: '可餐饮'
				},
				{
					text: '新房',
					value: '新房'
				},
				{
					text: '临街',
					value: '临街'
				},
				{
					text: '社区底商',
					value: '社区底商'
				},
				 {
					text: '可空转',
					value: '可空转'
				}])

	const checkboxarr = () =>{
		console.log('我是多选框的内容',checkbox2.value)
		baseFormData.checkbox3 = checkbox2.value.join(',');
		console.log('我是多选框的内容',baseFormData.checkbox3)
	} 

	//勾选我已阅读
	const range_value = ref(0)
	let range = reactive([{"value": 1}])
	const click_confirm = () =>{
		// console.log("是否会勾选我同意",range_value.value)
		console.log("我是选中的值",range_value.value[0])
	}



// 确认发布 ,绑定ref
const baseForm = ref(null)
	// 发布加一个节流
let lastClickTime =ref(0)
const to_release = () => {
	const currentTime = Date.now();
	console.log("当前时间",currentTime)
	if (currentTime - lastClickTime.value > 1200) {
		// 执行支付
		release_qz()
		lastClickTime.value = currentTime
	} else {
		lastClickTime.value = currentTime
	}
}
// 吧发布参数拿到外面，之后请求成功做缓存使用
let params_qz = reactive({})
const release_qz =() =>{
	addClick('小程序发布求租信息页','确认发布')
		// 是否进行勾选
		// if(!range_value.value[0]){
		// 	return	uni.showToast({
		// 				title: '请勾选服务协议',
		// 				//将值设置为 success 或者直接不用写icon这个参数
		// 				icon: 'none',
		// 				//显示持续时间为 2秒
		// 				duration: 1500
		// 			}) 
		// 	}
		// if(baseFormData.county==[]||baseFormData.county==''||baseFormData.city==[]||baseFormData.city==''||baseFormData.province==[]||baseFormData.province==''){
		// 	// 变红字体
		// 	ruless.value = 2	
		// 	return uni.showToast({
		// 				title: '请重新点击选择所属区域',
		// 				//将值设置为 success 或者直接不用写icon这个参数
		// 				icon: 'none',
		// 				//显示持续时间为 2秒
		// 				duration: 1500
		// 			}) 
		// 	}
			// 表单校验环节
		baseForm.value.validate().then(res =>{
			// 表单请求环节
			params_qz.name = baseFormData.name,
			params_qz.phone = baseFormData.phone,
			params_qz.title = baseFormData.title,
			params_qz.province = baseFormData.province,
			params_qz.city = baseFormData.city,
			params_qz.county = baseFormData.county,
			params_qz.feature_label = baseFormData.checkbox3,
			params_qz.shop_first_type = alltype_value.bigdefault.id,
			params_qz.shop_type = baseFormData.shop_type,
			params_qz.shop_area = cz_aefault_va.arma_default.mix,
			params_qz.area_max = cz_aefault_va.arma_default.max,
			params_qz.area_range = cz_aefault_va.arma_default.name,
			params_qz.rent =  cz_aefault_va.default.mix,
			params_qz.rent_max =  cz_aefault_va.default.max,
			params_qz.rent_range = cz_aefault_va.default.name,
			params_qz.user_id = user.user_id,
			params_qz.is_swerve = baseFormData.Rapid,
			params_qz.channel_no = baseFormData.channel_no,


			console.log("params",params_qz)
			// 判断这个表单是否提交过
			// 取到之前的表单
			const params_rent = uni.getStorageSync('params_rent') || '';
			const params1 = JSON.stringify(params_qz)
			if(params1 == params_rent){
				user.shop_id = uni.getStorageSync('seeking_rent_id');
				user.shop_type = uni.getStorageSync('seeking_rent_shop_type');
				user.money = uni.getStorageSync('seeking_rent_money');
				console.log("我提交过相同的表单",user.shop_id)
					// 请求产品
					product()
			}else{
				console.log("我提交的表单不一样或者已经改变",user.shop_id)
				onGotApiData('/api/app/shop_rent/add_v1','POST',params_qz,add_from)
			}

		}).catch(err =>{
			console.log("表单校验,上传失败",err)
			uni.showToast({
				title: '请完整填写表单',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			}) 
		})
	}

	// 表单提交之后返回的结果
	const add_from = (result) => {
		console.log("上传之后返回的结果",result)
		if(result.code == 402){
			// 没有缓存过或者数据改变过
			uni.setStorageSync('params_rent',JSON.stringify(params_qz));
			console.log('我是表单提交成功之后的402')
			user.shop_type = result.data.shop_type
			user.shop_id = result.data.shop_id
			user.money = result.data.money
			uni.setStorageSync('seeking_rent_shop_type', user.shop_type);
			uni.setStorageSync('seeking_rent_id', user.shop_id);
			uni.setStorageSync('seeking_rent_money', user.money);

			// 请求产品
			product()
		}
		else if(result.message){
			uni.showToast({
				title: result.message,
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			}) 
		}else{
			uni.showToast({
				title: '发布成功',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			}) 
		}
	}
		// 选择产品的副标题
	// let product_tit = reactive({
	// 	title:'店铺在本县范围推广展示',
	// 	titletwp:'点击选择下方置顶方案提升转出成功率',
	// }) 
	// // 点击最上方三个选择框
	// const onselect =(value)=>{
	// 	if(user.top_grade == value){
	// 		return
	// 	}else{
	// 		user.top_grade = value
	// 		product()
	// 	}
	// 	console.log("切换县市级套餐",user.top_grade)
	// 	// 更换标题
	// 	if(user.top_grade == 1){
	// 		product_tit.title = '店铺在本县范围推广展示'
	// 		product_tit.titletwp = '点击选择下方置顶方案提升转出成功率'
	// 	}else if(user.top_grade == 2){
	// 		product_tit.title = '店铺在本县+市范围同步推广展示'
	// 		product_tit.titletwp = '点击选择下方置顶方案提升转出成功率'
	// 	}
	// 	else if(user.top_grade == 3){
	// 		product_tit.title = '店铺收录置顶、官方推广认证'
	// 		product_tit.titletwp = '县级+市级+置顶15天+官方蓝V推广认证'
	// 	}
	// }
	// // 产品的列表
	// let product_lists = ref([])
	// // 选中的产品
	// let product_value  = reactive({
	// 	// 头部
	// 	required:{},
	// 	// 下放选择
	// 	requiredtwo:{},
	// 	// 选中的产品
	// 	default:{},
	// 	// 计算总价格
	// 	allmoney:''
	// })
	// // 请求产品会员的接口
	// const product = () =>{
	// 	let params = reactive({})
	// 	params.channelNo = baseFormData.channel_no,
	// 	// shop_type = shop_type
	// 	params.shop_type = user.shop_type,
	// 	params.money = user.money,
	// 	params.shop_first_type = baseFormData.shop_first_type,
	// 	params.top_grade = user.top_grade,
	// 	console.log("params",params)
	// 	onGotApiData('/api/app/product/list_v4','GET',params,product_result)
	// }
	// 	// 会员页面产品请求的结果
	// const product_result = (result) => {
	// 	// 遍历一下，会有json字符串
	// 	// result.forEach((value,index,Array)=>{
	// 	// 	if(value.childList){
	// 	// 		Array[index].childList = JSON.parse(value.childList)
	// 	// 		}
	// 	// 	})
	// 	product_lists.value = result
	// 	product_value.required = result.show_list
	// 	// 赋值最初是的总金额
	// 	user.pay_money = product_value.required[0].now_money
	// 	product_value.requiredtwo = result.top_list
	// 	product_value.allmoney = Number(product_value.required[0].now_money)
	// 	console.log('我是产品结果2',result)
	// 	product_value.default = {}
	// 	popup_ipone.value.open('bottom')
	// }
	// // 点击选择框事件
	// const childList = (item) =>{
	// 	addClick("H5会员页",item.product_name)
	// 	console.log('e:',item);
	// 	if(item.id == product_value.default.id){
	// 		product_value.default = {}
	// 		product_value.allmoney = Number(product_value.required[0].now_money)
	// 	}else{
	// 		product_value.default = item
	// 		product_value.allmoney = Number(product_value.required[0].now_money) +Number(item.now_money)
	// 	}
	// 	console.log("我选中的是",product_value.default)
	// }
const paypopup = ref(null)
const colse_paypopup = ()=>{
	paypopup.value.close()
}
// 请求求租产品的接口
let product_value  = reactive({
		// 全部
		required:{},
		// 选中的产品
		default:{},
		// 计算总价格
		allmoney:'',
		dier:{}
	})
const product = () =>{
	let params = reactive({})
	params.channel_no = baseFormData.channel_no
	console.log("params",params)
	onGotApiData('/api/app/product/rent/v1/list','GET',params,product_result)
}
// 求租会员页面产品请求的结果
const product_result = (result) => {
	console.log('我是产品结果1',result)
	paypopup.value.open('bottom')
	product_value.required = result
	// 默认选中第一个	
	product_value.default = result[0]
		// 做判断使用
	product_value.dier = result[1]
	product_value.allmoney = Number(product_value.default.now_money)
	console.log("产品",product_value)
}
// 点击产品选择框事件
const cpdefault = (item) =>{
	addClick("H5会员页",item.product_name)
	product_value.default = item
	console.log("我选中的是",product_value.default)
	product_value.allmoney = Number(product_value.default.now_money)
}


	// 支付加一个节流
	let paylastClickTime =ref(0)
	// 点击支付
	const pay_throttle = () => {
		
		const currentTime = Date.now();
		console.log("当前时间",currentTime)
		if (currentTime - paylastClickTime.value > 1200) {
		// 执行支付
			pay()
			paylastClickTime.value = currentTime
		} else {
			paylastClickTime.value = currentTime
		}
	}
		// 支付函数
		const pay = () =>{
		addClick("小程序_会员页","确认开通会员按钮")
		user.openid = uni.getStorageSync('open_id');
		console.log("我是openid",user.openid)
		// if(!range_value.value[0]){
		// 	console.log("我没有点击同意")
		// 	uni.showToast({
		// 		title: '请勾选服务协议',
		// 		icon: 'none',
		// 		duration: 2000
		// 	});
		// 	return
		// }
		// 支付时候的id拼接

		let params = reactive({})
		params.channel_no = baseFormData.channel_no,
		params.product_id = product_value.default.id,
		params.pay_type = 'WX_XCX',
		params.wxOpenId = user.openid,
		params.phone = baseFormData.phone,
		params.shop_type = user.shop_type,
		params.shop_id = user.shop_id,
		params.rent = user.money
		console.log("params",params)
		onGotApiData('/api/app/order/rent/v1/create','POST',params,pay_result)
	}
	
	// 点击支付之后的
	const pay_result = (result) => {
		console.log('支付请求结果',result)
		// 唤起微信支付
		requestPayment(result)
	}
	// 唤起支付
	const requestPayment = (result) => {
	// 唤起微信支付
	wx.requestPayment({
		timeStamp: '' + result.timestamp, // 时间戳，自行生成
		nonceStr: '' + result.noncestr, // 随机字符串，自行生成
		package: 'prepay_id=' + result.prepayid, // 统一下单接口返回的prepay_id参数值
		signType: 'MD5', // 签名算法，固定值为MD5
		paySign: '' + result.sign, // 签名，自行生成
		success: function (res) {
		// 支付成功回调
		console.log('支付成功', res);
		uni.showToast({
				title: '支付成功',
				icon: 'none',
				duration: 2000
			});
			// 支付成功跳转到回首页
			uni.redirectTo({
					url: '/pages/my_shop/my_shop'
				});

		return
		},
		fail: function (res) {
		// 支付失败回调
		console.log('支付失败', res);
		uni.showToast({
				title: '支付失败',
				icon: 'none',
				duration: 2000
			});
		}
	});
}
</script>

<style lang="scss" scoped>
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background-color: rgb(236, 234, 234);
		width: 750rpx auto;
		.main{
			width: 100%;
			background-color: #ffffff;
			// font-family: Arial, Helvetica, sans-serif;
			font-weight: 600;
			color: #F5F5F5;
			border-radius: 20rpx;
			margin: 10rpx 0 100rpx 0;
			.content{
				width: 720rpx;
				// height: 700rpx;
				margin: 0 auto;
				// background-color: pink;
				// border: 1px solid black;	
				// display: flex;
				// justify-content:center;	
				padding: 30rpx 0 10rpx 0;
				margin-bottom: 160rpx;

			}
		}
		// 最下方的悬浮
		.buttom{
			width: 100%;
			height: 100rpx;
			padding-top: 20rpx;
			// 参照浏览器视口进行定位
			position: fixed;
			// top: calc(100vh - 160rpx);
			bottom: 0;
			background-color: #F5F5F5;
			z-index: 99;
			.buttom_top{
				width: 500rpx;
				height: 50rpx;
				margin: 0 auto;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				// background-color: pink;
				display: flex;
				.buttom_lef{
					width: 50rpx;
					height: 50rpx;
				}
				.buttom_top_text{
					width: 400rpx;
					height: 50rpx;
					z-index: 999;
					font-size: 24rpx;
					line-height: 50rpx;
					// margin-left: -50rpx;
					.span1{
						color: rgb(255, 114, 64);
					}
				}
			}
			.buttom_buttom{
				width: 600rpx;
				height: 80rpx;
				margin:  0 auto;
				border-radius: 10rpx;
				background-color: rgb(255, 114, 64);
				line-height: 80rpx;
				text-align: center;
				color: #F5F5F5;
				font-weight: 500;
				font-size: 32rpx;
			}
		}
	}
	:deep(.uni-data-checklist){
		width: 740rpx;
		margin-left: 4rpx;

	}
	// 多选框的样式
	:deep(.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked){
		border-color: rgba(255, 76, 36, 1);
		background-color: rgba(255, 224, 201, 1);
	}
	:deep(.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked .checklist-text){
		color: rgba(255, 76, 36, 1);
	}
	:deep(.uni-data-checklist .checklist-group .checklist-box.is--tag){
		padding:8rpx;
		font-size: 20rpx;
		font-weight: 400;
		background-color:#f4f5f7;
		color: rgba(255, 76, 36, 1);
	}

		// 表单里面的穿透
	:deep(.uni-forms-item){
		display: inline-block;
			margin-top: 2rpx;
		.uni-forms-item__label{
			width: 700rpx !important;
				margin-top: 10rpx;
				font-size: 30rpx;
				font-weight: 700;
				color: black;
		}
		.uni-easyinput.inputone {
			width: 500rpx;
				// height: 160rpx;
				border-radius: 10rpx;
				background-color: #ffffff;
		}
	}
	:deep(.uni-easyinput__content-textarea){
		// width: 500rpx;
		// height: 60rpx;
		padding: 4rpx;
		border-radius: 10rpx;
		border: 1px solid rgb(224, 224, 224);
		background-color: rgb(20, 18, 18);	
	}
	:deep(.uni-forms-item--border){
			border-top:1px solid #fff;
			padding: 0;
		}
	:deep(.uni-easyinput__content-input){
		font-size: 30rpx;
		background: #f4f5f7;
		width: 700rpx;
		border-radius: 8rpx;
	}
	// 省市区的样式
	.Address{
		width: 700rpx;
		height: 70rpx;
		margin: 0 auto;
		background-color: rgba(244, 245, 247, 1);
		border: 1px solid rgba(244, 245, 247, 1);
		border-radius: 10rpx;
		display: flex;
		.address_i{
			width: 48rpx;
			height: 48rpx;
			// border: 1px solid black;
			background: url('../../static/images/位置.png');
			background-size: 100%;
			margin: 12rpx 0 0 30rpx;
		}
		.Address-item{
			width: 530rpx;
			height: 40rpx;
			padding-top: 16rpx;
			// border: 1px solid black;
			// background-color: pink;
			margin-left: 10rpx;
			font-weight: 500;
			font-size: 26rpx;
		}
		.address_ii{
			width: 36rpx;
			height: 36rpx;
			// border: 1px solid black;
			background: url('../../static/images/向下.png');
			background-size: 100%;
			margin: 16rpx 0 0 10rpx;
		}
	}
	// 选择店铺大类型的样式
	.use_to{
		width: 700rpx;
		margin:  0 auto;
		font-family: '思源黑体';
		// border: 1px solid black;
		display: flex;
		font-size: 28rpx;
		margin-bottom: 10rpx;
		// flex-wrap: wrap;
		.use_item{
			width: 140rpx;
			height: 54rpx;
			margin: 8rpx ;
			border-radius:10rpx;
			text-align: center;
			line-height: 54rpx;
			background-color: rgba(244, 245, 247, 1);
			border: 1px solid rgba(244, 245, 247, 1);
			color: rgba(56, 56, 56, 1);
			font-weight: 500;
		}
		.active{
			width: 140rpx;
			height: 54rpx;
			margin: 8rpx ;
			border-radius:10rpx;
			text-align: center;
			line-height: 54rpx;
			background-color: rgba(255, 224, 201, 1);
			color: rgba(255, 76, 36, 1);
			border: 1px solid rgba(255, 76, 36, 1);
			font-weight: 500;
		}
	}
	.use_too{
		width: 700rpx;
		margin:  0 auto;
		font-family: '思源黑体';
		font-size: 28rpx;
		// border: 1px solid black;
		font-weight: 400;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-around;
		.use_item{
			// width: 150rpx;
			height: 54rpx;
			margin: 8rpx 6rpx;
			padding: 0 12rpx;
			border-radius:10rpx;
			text-align: center;
			line-height: 54rpx;
			background-color: rgba(244, 245, 247, 1);
			border: 1px solid rgba(244, 245, 247, 1);
			color: rgba(56, 56, 56, 1);
			// font-weight: 500;
		}
		.active{
			// width: 150rpx;
			height: 54rpx;
			margin: 8rpx 6rpx;
			padding: 0 12rpx;
			border-radius:10rpx;
			text-align: center;
			line-height: 54rpx;
			background-color: rgba(255, 224, 201, 1);
			color: rgba(255, 76, 36, 1);
			border: 1px solid rgba(255, 76, 36, 1);
			// font-weight: 500;
		}
	}
	.radio_list{
		width: 550rpx;
		display: flex;
		// border: 1px solid black;
		.radio_list_groud{
			font-size: 24rpx;
			display: flex;
			margin: 6rpx 0 0 0rpx;
			.list_item{
				height: 60rpx;
				margin-top: 4rpx;
			}
			.tiem_text{
				// width: 60rpx;
				height: 60rpx;
				color: black;
				margin: 10rpx 16rpx 0 0;
			}
		}
	}
	.radio-groud{
		display: flex;
		margin: 6rpx 0 0 20rpx;

	}
	.hrone{
		width: 710rpx;
		height: 1rpx;
		margin-left: 10rpx;
		background-color: rgba(237, 237, 237, 1);
	}
	.my_chebox{
		width: 700rpx;
		height: 50rpx;
		// background-color: pink;
		color: black;
		font-size: 30rpx;
		font-weight: 700;
		margin: 20rpx 0 10rpx 1rpx;
		line-height: 50rpx;
		.span1{
			font-size: 28rpx;
			color: #fd6060;
		}
	}
	.feint_title{
		width: 720rpx;
		height: 120rpx;
		background-color: rgba(235, 235, 235, 1);
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.title_sty{
			width: 720rpx;
			height: 60rpx;
			color: #000;
			text-align: center;
		}
		// .feint_title_son{
		// 	color: rgba(0, 0, 0, 1);
		// 	font-size: 28rpx;
		// 	font-weight: 600;
		// 	line-height: 40rpx;
		// }
	}
	// 特色标签相关的穿透
	:deep(.uni-data-checklist){
		width: 740rpx;
		margin-left: 4rpx;
	}
	:deep(.uni-data-checklist .checklist-group .checklist-box.is--tag){
		padding: 8rpx 10rpx;
		font-size: 24rpx;
	}

.uni-input{
	color: #000;
}
.uni-inputactive{
	color: #F20;
}
:deep(.uni-forms .imglist){
		width: 750rpx;
		height: 50rpx;
		// background-color: pink;
		color: rgb(44, 43, 43);
		font-family: '思源黑体';
		margin-left: 10rpx;
		font-size: 30rpx;
		font-weight: 600;
	}
	
	// 弹出层的样式
	.popupipone_center{
		width: 750rpx;
		margin: 0 auto;
		border-radius: 30rpx 30rpx 0px 0px;
		background:rgba(242, 226, 196, 1);
		.porop_tit{
			width: 750rpx;
			height: 70rpx;
			padding: 26rpx 0 0 0;
			display: flex;
			.porop_tit_left{
				width: 600rpx;
				height: 70rpx;
				margin-left: 30rpx;
				font-size: 34rpx;
				font-weight: 600;
				line-height: 60rpx;
				color: rgba(255, 141, 26, 1);
			}
			.porop_tit_right{
				width: 60rpx;
				height: 70rpx;
				margin-left: 50rpx;
				background: url(../../static/images/7.png) no-repeat;
			}	
		}
		.three_select{
			width: 710rpx;
			height: 90rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			// border: 1px solid black;
			background:rgba(242, 226, 196, 1);
			display: flex;
			.select_item{
				width: 240rpx;
				height: 100rpx;
				// border: 1px solid black;
				display: flex;
				justify-content: space-around;
				.text{
					width: 160rpx;
					font-size: 34rpx;
					font-weight: 700;
					line-height: 50rpx;
					margin:20rpx 0 0 0;
					// border: 1px solid black;
					color: #fff;
					text-align: center;
				}
			}
			.select_active{
				width: 270rpx;
				height: 95rpx;
				margin-top: -5rpx;
				border-top-right-radius: 20rpx;
				border-top-left-radius: 20rpx;
				background: rgba(255, 255, 255, 1);
				display: flex;
				.img{
					width: 48rpx;
					height: 48rpx;
					margin: 25rpx 5rpx 0 35rpx;
				}
				.text{
					width: 160rpx;
					font-size: 34rpx;
					font-weight: 700;
					line-height: 50rpx;
					margin-top:25rpx;
					color: rgba(234, 158, 73, 1);
		
				}
			}
		}
		.prop_center{
			width: 710rpx;
			// height: 600rpx;
			margin: 0 auto;
			// margin-top: 30rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			.prop_center_top{
				width: 750rpx;
				height: 150rpx;
				padding-top: 10rpx;
				border-bottom: 2rpx solid rgba(229, 229, 229, 1);
				.center_top{
					padding-left: 20rpx;
					display: flex;
					.center_left{
						width: 500rpx;
						height: 70rpx;
						font-size:32rpx;
						font-weight: 600;
						line-height: 70rpx;
						color: rgba(0, 0, 0, 1);
					}
					.center_right{
						width: 180rpx;
						height: 70rpx;
						margin-left: 50rpx;
						font-size: 36rpx;
						font-weight: 700;
						line-height: 70rpx;
						color: rgba(255, 87, 51, 1);
						.spanone{
							font-size: 26rpx;
							font-weight: 400;
							color: rgba(255, 87, 51, 1);
						}
					}
				}
				.center_butt{
					padding:10rpx 0 0 20rpx;
					display: flex;
					.butt_left{
						width: 500rpx;
						height: 60rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 60rpx;
						color: rgba(128, 128, 128, 1);
					}
					.butt_right{
						margin-left: 70rpx;
					}
				}
			}
			.prop_center_bot{
				width: 750rpx;
				height: 310rpx;
				.center_top{
					padding-left: 20rpx;
					margin-top: 10rpx;
					// display: flex;
					.center_left{
						width: 200rpx;
						height: 70rpx;
						font-size:32rpx;
						font-weight: 600;
						line-height: 70rpx;
						color: rgba(0, 0, 0, 1);
					}
				}
				// 四个选着框
				.select_center{
					width: 710rpx;
					height: 260rpx;
					padding-top: 10rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;

					.select_center_item{
						width: 200rpx;
						height: 260rpx;
						margin-right: 10rpx;
						border-radius: 16rpx;
						background: linear-gradient(180deg, rgba(255,228,228,0) 0%, #FFE1E1 100%);
						box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(0,0,0,0.12);
						border: 1px solid rgba(213, 209, 206, 1);
						position: relative;
						.item_top{
							width: 200rpx;
							height: 30rpx;
							text-align: center;
							margin-top: 28rpx;
							line-height: 30rpx;
							font-size: 26rpx;
							font-weight: 600;
							color: rgb(0, 0, 0);
						}
						.item_center{
							width: 200rpx;
							height: 70rpx;
							margin-top: 10rpx;
							text-align: center;
							line-height: 80rpx;
							font-size: 54rpx;
							font-weight: 700;
							color: #F50909 ;
							.span2{
								font-size: 30rpx;
							}
						}
						.item_three{
							width: 200rpx;
							height: 30rpx;
							font-size: 24rpx;
							margin-top: 2rpx;
							text-align: center;
							// font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							text-decoration: line-through;
							line-height: 50rpx;
							color: #999 ;
						}
						.item_four{
							width: 160rpx;
							height: 50rpx;
							margin:  0 auto;
							margin-top: 16rpx;
							text-align: center;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							line-height: 50rpx;
							font-size: 20rpx;
							color: rgb(125, 120, 120);
							line-height: 30rpx;
						}
						.jiaobiao{
							width:48rpx;
							height: 48rpx;
							border-radius: 8rpx;
							background-size: cover;
							position: absolute;
							left: 152rpx;
							top: 214rpx;
						}
					}
					.active{
						background: rgb(252, 227, 221);
						border: 1px solid rgba(255, 87, 51, 1);
						.select_center_item_buttom{
							// background: rgba(255, 87, 51, 1);
							// color: rgba(255, 255, 255, 1);
							.select_item_right{
								color: rgba(255, 87, 51, 1) !important;
							}
						}
					}
				}
			}
			.propu_title{
				width: 600rpx;
				height: 50rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				// border: 1px solid black;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 50rpx;
				color: rgb(131, 127, 123);
				text-align: center;

			}
		}
		.prop_bottom{
			width: 750rpx;
			height: 100rpx;
			border: 1rpx solid rgba(242, 226, 196, 1);
			margin-top: 10rpx;
			display: flex;
			.buttom_top{
				width: 450rpx;
				height: 120rpx;
				background-color: #F5F5F5;
				font-size: 30rpx;
				line-height: 100rpx;
				color: rgba(255, 87, 51, 1);
				text-align: center;
			}
			.buttom_btn{
				width: 300rpx;
				height: 120rpx;
				margin: 0 auto;
				// margin-top: 60rpx;
				// margin-bottom: 20rpx;
				border-radius: 14rpx;
				background: rgba(255, 87, 51, 1);
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
				line-height: 100rpx;
				color: rgba(255, 255, 255, 1);

			}
		}
	}
		// 求租的支付弹框
	.popuppay{
		width: 750rpx;
		// height: 00rpx;
		background-color: rgba(255, 255, 255, 1);
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		position: relative;
		.popuppay_imgtwo{
			width: 48rpx;
			height: 48rpx;
			border-radius: 40rpx;
			background: url(../../static/images/chacha.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 666rpx;
			top: 20rpx;

		}
		.main_one{
				width: 750rpx;
				height: 100rpx;
				// border: 1px solid black;
				display: flex;
				.black{
					width: 6rpx;
					height: 30rpx;
					background-color: rgb(241, 17, 17);
					border-radius: 4prx;
					margin: 40rpx 0 0 20rpx;
				}
				.black_tit{
					width: 500rpx;
					height: 50rpx;
					margin: 30rpx 0 0 10rpx;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 50rpx;
					color: rgba(0, 0, 0, 1);
				}
			}
		.check{
			width: 750rpx;
			height: 90rpx;
			// border: 1px solid black;
			display: flex;
			justify-content: space-around;
			.item{
				width: 340rpx;
				height: 90rpx;
				box-shadow: 4px 4px 14px 2px rgba(0, 0, 0, 0.25);
				border-radius: 10rpx;
				border: 1px solid #fff;
				position: relative;
				display: flex;
				.tit{
					width: 190rpx;
					height: 90rpx;
					font-size: 30rpx;
					font-weight: 400;
					line-height: 90rpx;
					color: rgba(245, 164, 71, 1);
					text-align: center;

				}
				.money{
					width: 130rpx;
					height: 90rpx;
					font-size: 38rpx;
					font-weight: 900;
					line-height: 90rpx;
					color: rgba(56, 56, 56, 1);
					text-align: center;
				}
				.jiaobiao{
					width: 36rpx;
					height: 36rpx;
					// border: 1px solid black;
					background:url(../../static/images/jiaobiao.png);
					background-size: 100%;
					position: absolute;
					top: 54rpx;
					left: 304rpx;

				}
			}
			.active{
				border: 1px solid rgba(255, 87, 51, 1);
				background: linear-gradient(90deg, rgba(251, 225, 190, 1) 0%, rgba(252, 217, 217, 0.22) 100%);
				.money{
						color:rgba(255, 87, 51, 1);
				}
			}
			// 选中之后展示的图标

		}
		.quanyi{
			width: 720rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 148rpx;
				height: 200rpx;
				margin: 12rpx;
				// border: 1px solid black;
				.icon_bag{
					width: 100rpx;
					height: 100rpx;
					margin: 0 auto;
					border-radius: 4rpx;
					background-color:rgba(250, 225, 220, 1);
					.icon{
						width: 70rpx;
						height: 70rpx;
						margin: 15rpx;
					}
				}
				.bigtit{
					width: 148rpx;
					height: 40rpx;
					font-size: 14px;
					font-weight: 700;
					margin-top: 8rpx;
					letter-spacing: 1px;
					line-height: 20.27px;
					color: rgba(0, 0, 0, 1);
					text-align: center;
					vertical-align: top;
				}
				.tit{
					width: 158rpx;
					height: 20rpx;
					font-size: 22rpx;
					font-weight: 400;
					margin-top: 4rpx;
					line-height: 30rpx;
					color: rgba(0, 0, 0, 1);
					text-align: center;

				}
			}
		}
		.bottom{
			width: 750rpx;
			height: 100rpx;
			border-top: 1px solid rgb(167, 164, 164);
			display: flex;
			.bottom_one{
				width: 450rpx;
				height: 100rpx;
				// border: 1px solid black;
				color: rgba(255, 87, 51, 1);
				text-align: center;
				line-height: 100rpx;
				font-size: 26rpx;
			}
			.bottom_two{
				width: 300rpx;
				height: 100rpx;
				background-color: #F50909;
				color: #fff;
				text-align: center;
				line-height: 100rpx;
				font-size: 32rpx;
			}
		}
	}
	.feint_title{
		width: 720rpx;
		height: 120rpx;
		// border: 2px solid rgba(235, 235, 235, 1);
		background-color: rgba(244, 245, 247, 1);
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.title_sty{
			width: 720rpx;
			height: 60rpx;
			color: rgb(0, 0, 0);
			text-align: center;
		}

	}
	.textareaone{
		width: 690rpx;
		height: 80rpx;
		padding: 10rpx 30rpx;
		color: #000;
	}
</style>
